<template>
    <div class="home">
        <main class="content">
            <div class="card">
                <p>推荐</p>
                <el-carousel type="card" :interval="3000" trigger="click" class="carousel">
                    <el-carousel-item v-for="(item, index) in images" :key="index">
                        <div class="demo">
                            <img :src="item.src" alt="item.alt" class="img">
                        </div>
                        <div class="demo2">
                            fku
                        </div>

                    </el-carousel-item>
                </el-carousel>
            </div>
        </main>

        <aside class="sidebar">
            <el-empty description="description" />
        </aside>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

import {ref} from 'vue'
import imag1 from '../../assets/vue.jpeg'

const images = [
    {
        src: imag1,
        alt: 'Image 1'
    }
]
</script>

<style lang="css" scoped>


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.card {
    margin: 0 30px;
}

.home {
  display: flex;
  height: 100vh; /* 使容器占满整个视口高度 */
}

.sidebar {
  width: 150px; /* 侧边栏宽度 */
  background-color: #f4f4f4; /* 侧边栏背景颜色 */
  padding: 16px;
  border-right: 1px solid #ddd; /* 右侧边框 */
}

.content {
  flex: 1; /* 主内容区域占据剩余空间 */
  padding: 16px;
  overflow-y: auto; /* 当内容超过高度时启用滚动条 */
}

.carousel {
    /* height: 120px;
    width: 400px; */
}
.demo{
    /* height: 250px; */
    /* width:  269.95px; */
    /* object-fit: cover; */
}
.img{
    height: 100%;
    width: 100%;    
    object-fit: cover;
}
</style>